import React, { useMemo, useState } from "react";
import { Card, Space, Button } from 'antd'
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
import { useCallback } from "react/cjs/react.development";


const BaseInfo = React.memo((props) => {
  console.log('BaseInfo 重新渲染， props：', props)
  const { title, dataSource = {} } = props

  return (
    <Card title={title}>
      <div>姓名：{dataSource.name}</div>
    </Card>
  )
})
const OtherInfo = React.memo((props) => {
  console.log('OtherInfo 重新渲染， props：', props)
  const { title, dataSource } = props

  return (
    <Card title={title}>
      <div>学校：{dataSource.school}</div>
    </Card>
  )
})

function FunctionTest() {
  const commonObj = useMemo(() => {}, [])
  const [baseInfo, setBaseInfo] = useState({ name: '混沌' })
  const [otherInfo, setOtherInfo] = useState({ school: '上海大学' })

  const updateBaseInfo = useCallback(() => {
    console.log('点击-修改基本信息', baseInfo)
    setBaseInfo({ name: `貔貅 ${Date.now()}` })
  }, [])

  const updateOtherInfo = useCallback(() => {
    console.log('点击-修改其他信息', otherInfo)
    setOtherInfo({ school: `北京大学 ${Date.now()}` })
  }, [])

  return (
    <Space direction="vertical" style={{ width: '100%' }}>
      <Space>
        <Button
          onClick={updateBaseInfo}
        >修改基本信息</Button>
        <Button
          onClick={updateOtherInfo}
        >修改其他信息</Button>
      </Space>

      <BaseInfo
        title="基本信息 - 子组件"
        dataSource={baseInfo}
        updateBaseInfo={updateBaseInfo}
        commonObj={commonObj}
      />
      <OtherInfo
        title="其他信息 - 子组件"
        dataSource={otherInfo}
        updateOtherInfo={updateOtherInfo}
        commonObj={commonObj}
      />
    </Space>
  )
}

export default function App() {
  return (
    <div className="App">
      <FunctionTest />
    </div>
  );
}
